<template>
    <div>
        <hd-tab :tabs="tabs"/>
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span>可兑换列表</span>
            </div>
            <el-table
                :data=vouchers.data
                border
                size="mini"
                style="width: 100%">
                <el-table-column
                    label="ID"
                    prop="id"
                    width="80">
                </el-table-column>
                <el-table-column
                    label="UUID"
                    prop="uuid"
                    width="300">
                </el-table-column>
                <el-table-column
                    label="名称"
                    prop="name"
                >
                </el-table-column>
                <el-table-column
                    :filters="[{ text: 'normal', value: 'normal' }, { text: 'exchangeable', value: 'exchangeable' }]"
                    label="类型"
                    prop="type"
                >

                </el-table-column>
                <el-table-column
                    label="面额"
                    prop="amount"
                >

                </el-table-column>
                <el-table-column
                    label="过期时间"
                    prop="overtime"
                >

                </el-table-column>

                <el-table-column
                    #default="{row:voucher}"
                    label="状态"
                    prop="statusTitle"
                >
                    <el-tag
                        v-if="voucher.status<3"
                        effect="plain"
                        size="mini"
                        type="success">
                        {{ voucher.statusTitle }}
                    </el-tag>
                    <el-tag
                        v-else
                        effect="plain"
                        size="mini"
                        type="info">
                        {{ voucher.statusTitle }}
                    </el-tag>
                </el-table-column>

                <el-table-column
                    label="所属商户"
                    prop="user_name"
                >
                </el-table-column>
                <el-table-column
                    #default="{row:voucher}"
                    label="操作"
                >
                    <el-button size="mini" type='danger' @click="onSubmit(voucher)">兑换</el-button>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    v-if="vouchers.meta"
                    :current-page="vouchers.meta.current_page"
                    :page-size="5"
                    :total="vouchers.meta.total"
                    background
                    layout="total,prev, pager, next"
                    @current-change="page"
                >
                </el-pagination>
            </div>
        </el-card>


    </div>
</template>

<script>
import tabs from './tabs'

export default {
    route: {name: 'admin.voucher.exchangeable', meta: {title: '可兑换列表'}},
    data() {
        return {
            vouchers: {},
            tabs
        }
    },
    created() {
        this.load()
    },
    methods: {
        async load() {
            this.vouchers = await this.axios.post('admin/voucher/exchangeable');
        },
        async page(page = 1) {
            let url = `admin/voucher/exchangeable?page=${page}`
            this.vouchers = await this.axios.post(url);
        },
        async onSubmit(voucher) {
            this.axios.post(`admin/voucher/${voucher.uuid}/withdraw`, voucher);
        }
    }
}
</script>

<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>
]
